$prismDark: #f5f5f8; // 282a36
$prismWhite: #30313f; // ffffff

$char: #005cc5;
$comment: #999;
$keyword: #2f6f9f;
$attribute: #4f9fcf;
$lineHighlight: #14161a;
$primitive: #5a9bcf;
$string: #c23c20;
$variable: #999;
$boolean: #ff8b50;
$punctuation: #30313f;
$tag: #30313f;
$function: #79b6f2;
$className: #2f6f9f;
$method: #6699cc;
$operator: #2f6f9f;
$deleted: #b31d28;
$deletedBack: #ffeef0;
$inserted: #22863a;
$insertedBack: #f0fff4;

.gatsby-highlight {
	background: $prismDark;
	color: $prismWhite;
	border-radius: 4px;
	min-height: 42px;
	overflow: auto;
	position: relative;
	tab-size: 1.5em;

	.gatsby-code-text {
		background-color: inherit;
	}
}

.gatsby-highlight pre[class*='gatsby-code-'],
.gatsby-highlight pre.prism-code {
	height: auto !important;
	margin: 1rem;
	color: $prismWhite;
	font-size: 13px;
	line-height: 20px;
	white-space: pre;
	word-break: break-word;
}

.gatsby-highlight-code-line {
	background-color: $lineHighlight;
	display: block;
	margin: -0.125rem calc(-1rem - 15px);
	padding: 0.125rem calc(1rem + 15px);
}

.token.attr-name {
	color: $attribute;
}

.token.comment,
.token.block-comment,
.token.prolog,
.token.doctype,
.token.cdata {
	color: $comment;
}

.token.property,
.token.number,
.token.function-name,
.token.constant,
.token.symbol {
	color: $primitive;
}

.token.deleted {
	background-color: $deletedBack;
	color: $deleted;
}

.token.boolean {
	color: $boolean;
}

.token.tag {
	color: $tag;
}

.token.string {
	color: $string;
}

.token.punctuation {
	color: $punctuation;
}

.token.selector,
.token.char,
.token.builtin {
	color: $char;
}

.token.inserted {
	color: $inserted;
	background-color: $insertedBack;
}

.token.function {
	color: $function;
}

.token.operator {
	color: $operator;
}

.token.entity,
.token.url,
.token.variable {
	color: $variable;
}

.token.attr-value {
	color: $string;
}

.token.keyword {
	color: $keyword;
}

.token.atrule,
.token.class-name {
	color: $className;
}

.token.important {
	font-weight: 400;
}

.token.bold {
	font-weight: 700;
}

.token.italic {
	font-style: italic;
}

.token.entity {
	cursor: help;
}

.namespace {
	opacity: 0.7;
}
